<template>
	<view class="container">
		<view class="payBox">
			<view class="text01">{{getStatus(info.status)}}</view>
			<view v-if="info.status=='0'" class="text02" style="position:relative;">
				剩余支付时间：
				<view style="position:absolute;left:28%;top:8.2%">
					<uv-count-down :time="time" format="HH:mm:ss" customStyle="color:#fff"></uv-count-down>
				</view>
			</view>
			<view class="text02">
				<text v-if="info.status=='3'|| info.status=='4'">期待您再次购买</text>
				<text v-if="info.status=='2'">等待平台审核</text>
				<text v-if="info.status=='1'|| info.status=='5'">按时上课</text>
			</view>
		</view>
		<view class="bgWrite lessonDetail">
			<view class="h2Ttl">课程信息</view>
			<view class="topBox">
				<view style="margin-right: 20rpx;">
					<image :src="imgUrl(info.product_cover)" style="width: 150rpx; height: 150rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;"></image>
				</view>
				<view>
					<view class="title">{{info.product_name}}</view>
					<view class="txtNumber">¥{{info.product_price}}</view>
				</view>
			</view>
			<view class="priceBox">
				<view style="font-weight: bold;
font-size: 30rpx;
color: #333333;">商品总价</view>
				<view style="font-weight: 500;
font-size: 28rpx;
color: #333333;">¥{{info.total_price}}</view>
			</view>
		</view>
		<view class="schoolBox" v-for="(item,index) in list?.schools" :key="index">
			<view>
				<view class="txtSchool">{{item.name}}</view>
				<view class="txtAdd01">
					{{item?.province?.name}}{{item?.city?.name}}{{item?.area?.name}}{{item?.address}}
				</view>
			</view>
			<view @click="toMap(item)">
				<image src="@/static/img/icon06.png" style="width: 40rpx;height: 40rpx;"></image>
			</view>
		</view>
		<view class="bgWrite">
			<view class="h2Ttl">订单信息</view>
			<uv-row customStyle="padding: 20rpx 0 10rpx">
				<uv-col span="2.5">
					<view class="labelTxt">订单编号</view>
				</uv-col>
				<uv-col span="9.5">
					<view class="valueTxt">
						<text class="valueTxt">{{info.order_no}}</text>
						<text class="copyLink" @click="copyText(info.order_no)">复制</text>
					</view>
				</uv-col>
			</uv-row>
			<uv-row customStyle="padding: 20rpx 0 10rpx" v-if="info?.user_remark">
				<uv-col span="2.5">
					<view class="labelTxt">备注信息</view>
				</uv-col>
				<uv-col span="9.5">
					<view class="valueTxt">{{info?.user_remark||''}}</view>
				</uv-col>
			</uv-row>
			<uv-row customStyle="padding: 20rpx 0 10rpx"  >
				<uv-col span="2.5">
					<view class="labelTxt">下单时间</view>
				</uv-col>
				<uv-col span="9.5">
					<view class="valueTxt">{{info.created_at}}</view>
				</uv-col>
			</uv-row>
			<uv-row customStyle="padding: 20rpx 0 10rpx"  v-if="info.pay_time">
				<uv-col span="2.5">
					<view class="labelTxt">付款时间</view>
				</uv-col>
				<uv-col span="9.5">
					<view class="valueTxt">{{info.pay_time}}</view>
				</uv-col>
			</uv-row>
			<uv-row customStyle="padding: 20rpx 0 10rpx"  v-if="info.refund_time">
				<uv-col span="2.5">
					<view class="labelTxt">退款时间</view>
				</uv-col>
				<uv-col span="9.5">
					<view class="valueTxt">{{info.refund_time}}</view>
				</uv-col>
			</uv-row>
			<uv-row customStyle="padding: 20rpx 0 10rpx"  v-if="info.cancel_time">
				<uv-col span="2.5">
					<view class="labelTxt">取消时间</view>
				</uv-col>
				<uv-col span="9.5">
					<view class="valueTxt">{{info.cancel_time}}</view>
				</uv-col>
			</uv-row>
			<uv-row customStyle="padding: 20rpx 0 10rpx"  v-if="info.refund_price">
				<uv-col span="2.5">
					<view class="labelTxt">退款金额</view>
				</uv-col>
				<uv-col span="9.5">
					<view class="valueTxt">{{info.refund_price}}</view>
				</uv-col>
			</uv-row>
			<view style="height:100rpx;"></view>
		</view>
		<view class="btnBox">
			<button class="blueBtn" @click="paymini(info.order_no)" v-if="info.status=='0'">立即付款</button>
			<button @click="cancel(info.id)" v-if="info.status=='0'" class="quBtn">取消订单</button>
			<button @click="cancel1(info.id)" v-if="info.status=='3'||info.status=='4'||info.status=='6'" class="quBtn">删除订单</button>
			<button class="blueBtn" @click="tui(info.id)" v-if="info.status=='1'||info.status=='5'">退款</button>
			<button class="blueBtn" @click="qu(info.id)" v-if="info.status=='2'">取消退款</button>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import route from '@/utils/route';
	import { ref, getCurrentInstance } from 'vue';
	import { http } from '@/common/http/index';
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { toast, imgUrl } from '@/utils/fun';
	//定义变量
	const [picker, category_id, info, list, loading, time] = [ref(), ref(), ref({}), ref(), ref(false), ref()];
	onLoad(e => {
		category_id.value = e.id;
		get_info();
	});
	//删除订单
	const cancel1 = (e) => {
		let params = {
			id: e,
		}
		http.post(`/api/v1/order/delete `, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('删除成功！');
				get_info();
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	//获取时间
	const getTime = (e) => {
		var curDate = new Date(date);
		console.log(curDate);
		var dateTime = new Date((curDate / 1000 + 86400) * 1000); //86400一天
		console.log(dateTime);
		var mon = dateTime.getMonth() + 1;
		console.log(mon);
		var day = dateTime.getDate();
		return (
			dateTime.getFullYear() +
			"-" +
			(mon < 10 ? "0" + mon : mon) +
			"-" +
			(day < 10 ? "0" + day : day)
		);
	}
	//取消订单
	const cancel = (e) => {
		let params = {
			id: e,
		}
		http.post(`/api/v1/order/cancel `, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('取消成功！');
				get_info();
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	//取消退款
	const qu = (e) => {
		let params = {
			id: e,
		}
		http.post(`/api/v1/order/cancel_refund`, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('取消成功！');
				get_info();
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	//退款
	const tui = (e) => {
		let params = {
			id: e,
		}
		http.post(`/api/v1/order/refund `, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('退款成功！');
				get_info();
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	//调用支付
	const paymini = (resX) => {
		const params = {
			order_no: resX
		};
		http.post(`/api/v1/order/pay`, params, { custom: { loading: true } })
			.then(res => {
				setTimeout(() => {
					loading.value = false
				}, 1500)
				console.log("支付进来了吗", resX)
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(res.data.timeStamp),
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: res => {
						uni.redirectTo({ url: '/pages/lesson/paySuccess' })
					},
					fail(e) {
						console.log(e);
					}
				})

			})
			.catch(err => {
				console.log(err);
			})
	}
	//获取详情信息
	const get_info = async () => {
		info.value = (await http.get('/api/v1/order/details?id=' + category_id.value)).data;//获取左侧菜单
		list.value = info.value.product;
		var cancel = info.value.cancel_time;
		const now = new Date();
		var format = cancel.replace(/-/g, '/');
		var starttime = new Date(format);
		time.value = Number(starttime) - Number(now);
		console.log("11111", time.value)
		uni.setNavigationBarTitle({
			title: getStatus(info.value.status)
		});

	};
	const getStatus = (e) => {
		if (e == 0) {
			return '待支付';
		} else if (e == 1) {
			return '已支付';
		} else if (e == 2) {
			return '退款申请 ';
		} else if (e == 3) {
			return '已取消 ';
		} else if (e == 4) {
			return '已退款 ';
		} else if (e == 5) {
			return '已支付 ';
		}
		return '已完成'
	}
	const collect = (e) => {
		let params = {
			product_id: category_id.value,
		}
		http.post(`/api/v1/product/collection`, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('收藏成功！');
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	const toMap = (item) => {
		console.log('点击地图', item)
		uni.openLocation({
			name: item.name,
			latitude: Number(item.place.split(',')[1]), //要去的纬度
			longitude: Number(item.place.split(',')[0]), //要去的经度 
			address: item.address, //要去的具体地址 
		})
	}
	const copyText = (item) => {
		uni.setClipboardData({
			data: item,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success',
					duration: 2000
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgba(248, 249, 251, 1);
	}

	.container {
		padding-bottom: 50rpx;
	}

	.txtSchool {
		font-size: 22rpx;
		line-height: 50rpx;
		color: rgba(0, 0, 0, 1);
		font-weight: bold;
	}

	.txtAdd01 {
		padding-right: 30rpx;
		font-size: 22rpx;
		line-height: 40rpx;
		color: #999;
	}

	.txtAdd02 {
		padding-right: 30rpx;
		font-size: 22rpx;
		line-height: 40rpx;
		color: rgba(153, 153, 153, 1);
	}

	.payBox {
		padding: 45rpx 80rpx 65rpx;
		color: #fff;
		height: 246rpx;
		box-sizing: border-box;
		background: rgba(49, 192, 237, 1);
	}

	.text01 {
		line-height: 60rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.text02 {
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		padding-top: 6rpx;
	}

	.lessonDetail {
		margin-top: -70rpx !important;
	}

	.priceBox {
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.labelTxt {
		font-weight: 500;
		font-size: 26rpx;
		color: #969696;
	}

	.valueTxt {
		font-weight: bold;
		font-size: 26rpx;
		color: #333333;
	}

	.copyLink {
		margin-left: 20rpx;
		display: inline-block;
		font-size: 24rpx;
		text-align: center;
		padding: 0 20rpx;
		height: 45rpx;
		line-height: 45rpx;
		border-radius: 198rpx 198rpx 198rpx 198rpx;
		border: 1rpx solid #B6B6B6;
		font-weight: 500;
		font-size: 24rpx;
		color: #1B1B1B;
	}

	.quBtn {
		width: 140rpx;
		height: 52rpx;
	display: flex;          /* 启用 Flexbox 布局 */
	justify-content: center; /* 水平居中 */
	align-items: center;    /* 垂直居中 */
		opacity: 1;
		color: #fff;
		border-radius: 99rpx !important;
		background: #FFFFFF;
		border-radius: 198rpx 198rpx 198rpx 198rpx;
		border: 1rpx solid #727272;
		font-weight: 500;
		font-size: 24rpx;
		color: #1B1B1B;
	}

	.blueBtn {
		/* margin: 10rpx 0 0; */
		width: 140rpx;
		height: 52rpx;
		display: flex;          /* 启用 Flexbox 布局 */
		justify-content: center; /* 水平居中 */
		align-items: center;    /* 垂直居中 */
		font-size: 24rpx;
		opacity: 1;
		color: #fff;
		border-radius: 99rpx !important;
		background: #31C0ED;
	}

	::v-deep .blueBtn:after {
		border: none;
		border-radius: 99rpx !important;
	}

	::v-deep .btnBox uni-button:after {
		/* border: none; */
		border-radius: 99rpx !important;
	}

	.hTtl {
		text-align: center;
		padding: 60rpx;
		font-size: 32rpx;
		/* font-weight: 700; */
		line-height: 21px;
		color: rgba(0, 0, 0, 1);
	}

	.bgWrite {
		margin: 0 30rpx 30rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx 30rpx 30rpx;

	}

	.topBox {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.h2Ttl {
		margin-bottom: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		/* color: rgba(51, 51, 51, 1); */
	}

	.title {
		margin-bottom: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}

	.txtNumber {
		font-size: 24rpx;
		line-height: 32px;
		font-weight: bold;
		color: #31C0ED;
	}

	.schoolBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-radius: 15rpx;
		padding: 30rpx 30rpx 25rpx;
		margin: 0 30rpx 30rpx;
	}

	.txtAdd01 {
		padding-right: 30rpx;
		font-size: 22rpx;
		line-height: 38rpx;
		color: rgba(102, 102, 102, 1);
	}

	.timeBox {
		border-bottom: 1px solid rgba(245, 245, 245, 1);
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		color: rgba(102, 102, 102, 1);
	}

	.btnBox {
		/* width: 175px; */
		float: right;
		overflow: hidden;
		zoom: 1;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 40rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.btnBox button {
		padding: 0;
		width: 145rpx;
		height: 60rpx;
		border-radius: 99rpx !important;
		font-size: 22rpx;
		float: right;
		margin-left: 25rpx;
	}
</style>